<template>
	<view class="task-box left clearfix">
		<!--标题和进行中状态-->
		<view class="task-title-box left clearfix">
			<view class="task-title-left left ellipsis">
				北京肯德基实探基地 3天两夜学习 中国最好的培训基地
			</view>
			<view class="task-title-right right">
				任务已结束
			</view>
		</view>
		
		<view class="task-label-box left clearfix">
			
			<view class="task-label-item left">
				<view class="task-label-icon left">
					<image src="https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/icons/douyin2.png" style="width:100%;height:100%;"></image>
				</view>
				<view class="task-label-text left">
					实探
				</view>
			</view>
			
			
			<view class="task-label-items left">
				<view class="task-label-icon left" style="margin-top:-.25rem;">
					<uni-icons type="icon-daijiesuan" size="15" color="#ccc" custom-prefix="iconfont"></uni-icons>
				</view>
				<view class="task-label-text left">
					线下结算
				</view>
			</view>
			
			<view class="task-label-items left">
				<view class="task-label-icon left" style="margin-top:-.25rem;">
					<uni-icons type="icon-fanxuan5" size="15" color="#ccc" custom-prefix="iconfont"></uni-icons>
				</view>
				<view class="task-label-text left">
					需要反选
				</view> 
			</view>
			
			<!--浏览次数-->
			<view class="task-number left clearfix">
				<view class="task-numbers left clearfix">
					<text>报名编号：</text><text>34</text>
				</view>
				
				<!--任务金-->
				
				<view class="task-price right clearfix">
					任务金：￥150
				</view>
			</view>
			
			 
		</view>
	</view>
</template>

<style scoped>
	.task-price{width:6rem;line-height:1.5rem;text-align: center;font-size:.9rem;margin-top:.2rem;margin-right:1rem;}
	.task-numbers text:last-child{width:calc(2.8rem - 2px);text-align: center;}
	.task-numbers text:first-child{padding-left:.5rem;width:4.2rem;background:#d4e4ff;border-radius: 5px 0 0 5px;}
	.task-numbers text{float:left;height:100%;color: #2979ff;}
	.task-numbers{width:7.5rem;line-height:1.5rem;height:1.5rem;border:1px solid #2979ff;border-radius: 5px;font-size:.8rem;}
	.task-number{width:calc(100% - 1rem);height:3rem;line-height:1.5rem;margin-left:.5rem;margin-top:1.5rem;}
	.task-label-text{line-height:1.6rem;font-size:.7rem;color:#999;margin-right:.3rem;}
	.task-label-icon{width:1rem;height:1rem;margin:.25rem;margin-top:-.1rem;}
	.task-label-item{height:1.5rem;background: linear-gradient(to right, #cceefe, #f9e1ec);border-radius:5px;margin-left:.5rem;margin-right:.2rem;}
	.task-label-items{height:1.5rem;background: #f5f5f5;border-radius:5px;margin-left:.5rem;margin-right:.2rem;}
	.task-label-box{width:calc(100% - 1rem);height:2rem;line-height:2rem;margin-left:.5rem;margin-top:.5rem;}
	.task-title-right{width:25%;line-height:2rem;color:#2979ff;font-size:.9rem;text-align: center;}
	.task-title-left{width:70%;line-height:2rem;margin-left:1rem;font-size:1rem;font-weight:600;}
	.task-title-box{width:100%;height:2rem;margin-top:.8rem;}
	.task-box{width:100%;height:9.3rem;background:#fff;border-radius: 10px;margin-top:.5rem;margin-bottom:.2rem;}
</style>

<script>
	export default {
		name:"task-manage-item",
		data() {
			return {
				
			};
		}
	}
</script>
